<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData" :rules="rules">
				<view class="box">
					<uni-data-checkbox mode="tag" v-model="timeRanges" :localdata="timeList" @change="rangeChange"></uni-data-checkbox>
					<uni-forms-item required label="开始时间" name="start_date">
						<picker mode="date" @change="bindTimeStart" :value="FormData.start_date">
							<view class="picker-input">
								{{ FormData.start_date }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="结束时间" name="end_date">
						<picker mode="date" @change="bindTimeEnd" :value="FormData.end_date" :start="FormData.start_date">
							<view class="picker-input">
								{{ FormData.end_date }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
				</view>
				<view class="box">
					<uni-forms-item required label="出租方式" name="pay_type">
						<picker @change="payTypeChange" :value="FormData.pay_type" :range="paytype" range-key="label">
							<view class="picker-input">
								{{ FormData.pay_type_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="租金" name="pay_money">
						<uni-easyinput type="digit" v-model="FormData.pay_money" :clearable="false" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item required label="押金" name="rent_deposit">
						<uni-easyinput type="digit" v-model="FormData.rent_deposit" :clearable="false" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item required label="居住人数" name="people_number">
						<uni-easyinput type="number" v-model="FormData.people_number" :clearable="false" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item required label="面积" name="rent_area">
						<uni-easyinput type="number" v-model="FormData.rent_area" :clearable="false" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item required label="支付时间" name="pay_days" v-if="FormData.pay_type == 'month'">
						<picker @change="bindDayChange" :value="form.pay_days" :range="monthway" range-key="label">
							<view class="picker-input">
								<text v-if="FormData.pay_days == 0">一次性</text>
								<text v-else-if="FormData.pay_days == 12">每1年</text>
								<text v-else>每{{ FormData.pay_days }}月</text>
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="支付时间" name="pay_days" v-else-if="FormData.pay_type == 'day'">
						<picker @change="bindDayChange" :range="dayway">
							<view class="picker-input">
								<text v-if="FormData.pay_days == 0">一次性</text>
								<text v-else>每{{ FormData.pay_days }}天</text>

								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="用途" name="used_type">
						<picker @change="usedTypeChange" :range="usedtype">
							<view class="picker-input">
								{{ FormData.used_type }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="房间物品" name="deviceOther">
						<uni-easyinput type="textarea" v-model="FormData.deviceOther" placeholder="请填写房间物品信息" />
					</uni-forms-item>
					<uni-forms-item label="其他约定" name="contract_other">
						<uni-easyinput type="textarea" v-model="FormData.contract_other" placeholder="请填写其他约定信息" />
					</uni-forms-item>
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			FormData: {
				room_id: '',
				rent_sn: '',
				customer_id: '',
				pay_type: 'month',
				pay_type_name: '月租',
				pay_money: '',
				pay_days: 1,
				rent_area: '',
				rent_deposit: '',
				people_number: '',
				used_type: '居住',
				contract_other: '',
				deviceOther: '',
				start_date: '',
				end_date: ''
			},
			rules: {
				start_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择开始日期'
						}
					]
				},
				end_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择结束日期'
						}
					]
				},
				pay_money: {
					rules: [
						{
							required: true,
							errorMessage: '请输入租金'
						}
					]
				},
				rent_deposit: {
					rules: [
						{
							required: true,
							errorMessage: '请输入押金'
						}
					]
				},
				people_number: {
					rules: [
						{
							required: true,
							errorMessage: '请输入居住人数'
						}
					]
				},
				rent_area: {
					rules: [
						{
							required: true,
							errorMessage: '请输入面积'
						}
					]
				}
			},
			timeList: [
				{
					text: '1月',
					value: 1
				},
				{
					text: '3月',
					value: 3
				},
				{
					text: '6月',
					value: 6
				},
				{
					text: '1年',
					value: 12
				}
			],
			paytype: [
				{
					value: 'month',
					label: '月租'
				},
				{
					value: 'day',
					label: '日租'
				}
			],
			monthway: [
				{
					value: 1,
					label: '每1月'
				},
				{
					value: 2,
					label: '每2月'
				},
				{
					value: 3,
					label: '每3月'
				},
				{
					value: 4,
					label: '每4月'
				},
				{
					value: 6,
					label: '每6月'
				},
				{
					value: 12,
					label: '每1年'
				},
				{
					value: 0,
					label: '一次性'
				}
			],
			dayway: ['一次性'],
			usedtype: ['居住', '商业']
		};
	},
	onLoad(e) {
		const row = JSON.parse(e.detail);
		this.FormData.room_id = row.room_id;
		this.FormData.customer_id = row.customer_id;
		this.FormData.rent_sn = row.rent_sn;
		this.FormData.start_date = row.start_date;
		this.FormData.end_date = row.end_date;
		this.FormData.people_number = row.customer_list.length + 1;
		for (let i = 0; i < 31; i++) {
			this.dayway.push('每' + Number(i + 1) + '天');
		}
	},
	methods: {
		rangeChange(e) {
			this.FormData.end_date = this.dayjs(this.FormData.start_date).add(e.detail.value, 'M').subtract(1, 'd').format('YYYY-MM-DD');
		},
		bindTimeStart(e) {
			this.FormData.start_date = e.detail.value;
			this.timeRanges = null;
		},
		bindTimeEnd(e) {
			this.FormData.end_date = e.detail.value;
			this.timeRanges = null;
		},
		payTypeChange(e) {
			this.FormData.pay_type = this.paytype[e.detail.value].value;
			this.FormData.pay_type_name = this.paytype[e.detail.value].label;
			if (this.FormData.pay_type == 'month') {
				this.FormData.pay_days = 1;
			} else if (this.FormData.pay_type == 'day') {
				this.FormData.pay_days = 0;
			}
		},
		bindDayChange(e) {
			if (this.FormData.pay_type == 'day') {
				this.FormData.pay_days = e.detail.value;
			} else if (this.FormData.pay_type == 'month') {
				this.FormData.pay_days = this.monthway[e.detail.value].value;
			}
		},
		usedTypeChange(e) {
			this.FormData.used_type = this.usedtype[e.detail.value];
		},
		submit() {
			this.$refs.form.validate().then((res) => {
				api.hetongAdd(this.FormData).then((data) => {
					if (data.data.is_success) {
						uni.hideLoading();
						uni.showToast({
							title: '办理成功'
						});
						setTimeout(() => {
							uni.hideToast();
							uni.navigateBack();
						}, 1000);
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '合同添加失败',
							icon: 'none'
						});
					}
				});
			});
		}
	}
};
</script>